<template>
  <VAceEditor
      class="edit_box"
      v-model:value="editorValue"
      v-bind="attr"
      :lang="lang"
      theme="tomorrow"
      :readonly="readonly"
      ref="aceDom"
      @init="editorInit"
      :class="{ border: hasBorder }"
      :options="{
      fontSize: 14,
      //代码提示及自动补全
      enableSnippets: true,
      enableLiveAutocompletion: true,
      enableBasicAutocompletion: true,
      tabSize: 2,
      placeholder:'',
      showPrintMargin: false,
      highlightActiveLine: highlightActiveLine,
      showLineNumbers: showLineNumbers,
      showGutter: showGutter,
      wrap: true,//自动换行
    }"
  />
</template>

<script setup name="AceEditor">
import { VAceEditor } from "vue3-ace-editor";
import "@/utils/vace.config";
const props = defineProps({
  lang: {
    type: String,
    default: "sql",
  },
  // 是否只读
  readonly: {
    type: Boolean,
    default: false,
  },
  // 是否显示行数
  showLineNumbers: {
    type: Boolean,
    default: true,
  },
  // 是否显示左侧行数那列
  showGutter: {
    type: Boolean,
    default: true,
  },
  hasBorder: {
    type: Boolean,
    default: true,
  },
  // 是否高亮选中行
  highlightActiveLine: {
    type: Boolean,
    default: true,
  },
});
const {proxy} = getCurrentInstance();

const attr = useAttrs();
const aceDom = ref();
const editor = ref();
const editorValue = ref("");
const editorInit = (editorInstance) => {
  editor.value = editorInstance; //editor实例
};
onMounted(() => {
  proxy.$emit("getEditorInstance", editor.value);
});
</script>
<style  lang="less">
.edit_box {
  width: 100%;
  height: 100%;
  .ace_scroller .ace_content .ace_placeholder {
    color: var(--grey-text-color1) !important;
  }
}

.border {
  border: 1px solid #c0c4cc;
  border-radius: 5px;
}
</style>